<!-- eslint-disable require-atomic-updates -->
<template>
  <div class="container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-button type="primary" @click="dialogVisible=true">操作按钮</el-button>
        </div>
        <div class="text item">
          <el-table :data="rolesList">
            <!-- ---- -->
            <el-table-column prop="name" label="角色" width="180" style="text-align:center">
              <template #default="scope">
                <el-input v-if="scope.row.isEdit" v-model="scope.row.name" />
                <span v-else> {{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <!-- -------- -->
            <el-table-column prop="state" label="启用" width="180">
              <template #default="scope">
                <el-switch v-if="scope.row.isEdit" v-model="scope.row.state" :active-value="1" :inactive-value="0" />
                <span v-else>  {{ scope.row.state === 1 ? "已启用" : "未启用" }}</span>
              </template>
            </el-table-column>
            <!-- --------- -->
            <el-table-column prop="description" label="描述">
              <template #default="scope">
                <el-input v-if="scope.row.isEdit" v-model="scope.row.description" type="textarea" />
                <span v-else> {{ scope.row.description }}</span>
              </template>
            </el-table-column>

            <!-- ----- -->
            <el-table-column label="操作">
              <template #default="scope">
                <template v-if="scope.row.isEdit">
                  <el-button size="mini" type="primary" @click="btnConfirm(scope.row)">确认</el-button>
                  <el-button size="mini" @click="btnCancle(scope.row)">取消 </el-button>
                  <!-- 点击取消的时候 操作过的痕迹应该消除 -->
                </template>
                <template v-else>
                  <el-button type="text" @click="showRole(scope.row.id)">分配权限</el-button>
                  <el-button type="text" @click="scope.row.isEdit=true">编辑</el-button>
                  <!-- <el-button type="text" @click="del(scope.row.id)">删除</el-button> -->

                  <el-popconfirm
                    title="确定删除吗？"
                    @confirm="del(scope.row.id)"
                  >
                    <template #reference>
                      <el-button type="text">删除</el-button>
                    </template>
                  </el-popconfirm>
                </template>
              </template>
            </el-table-column>
            <!-- ----- -->
          </el-table>
        </div>
      </el-card>
      <div style="text-align: right">
        <el-pagination
          layout="prev, pager, next,jumper,sizes"
          :total="total"
          :page-size="roleParems.pagesize"
          :page-sizes="[5, 10, 20]"
          @current-change="changpage"
          @size-change="Sizechange"
        />
      </div>
    </div>
    <!-- 新增框 -->
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="50%"
      @close="$refs.ruleFormRef.resetFields()"
    >
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="ruleFormRules" label-width="80px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <!--  -->
        <el-form-item label="启用" prop="state">
          <el-switch
            v-model="ruleForm.state"
            active-color="#409eff"
            inactive-color="#dcdfe6"
            :active-value="1"
            :inactive-value="0"
          />

        </el-form-item>
        <!--  -->
        <el-form-item prop="description" label="角色描述">
          <el-input v-model="ruleForm.description" type="textarea" />
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-button>取 消</el-button>
          <el-button type="primary" @click="addrole()">确 定</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
    <!-- 权限设置 -->
    <el-dialog title="分配权限" :visible.sync="isShow" width="40%">
      <el-tree
        ref="permissiontree"
        :data="permissionList"
        show-checkbox
        default-expand-all
        :props="{label:'name'}"
        node-key="id"
        :default-checked-keys="permIds"
      />
      <template #footer>
        <el-button type="primary" @click="assignPermission">确认</el-button>
        <!-- 这里被我消掉啦 -->
        <el-button @click="isShow=false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { getRoles, delRoles, addRoles, getroleDetail, assignpermission, editRole } from '@/api/role'
import { getpermission } from '@/api/permission'
import { transListToTree } from '@/utils'
export default {
  name: 'Role',
  data() {
    return {

      id: null,
      permIds: [],
      permissionList: [],
      isShow: false,
      dialogVisible: false,
      rolesList: [],
      total: null,
      roleParems: {
        page: 1,
        pagesize: 10
      },
      ruleForm: {
        name: '',
        description: '',
        state: 1 // 1是启用 0 未启用
      },
      ruleFormRules: {
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '角色描述不能为空', trigger: 'blur' }
        ]
      }

    }
  },
  async created() {
    await this.getRoles()
  },
  methods: {
    async getRoles() {
      const res = await getRoles(this.roleParems)
      console.log(res)
      res.rows.forEach(item => {
        item.isEdit = false
        item.obj = { ...item }// 原始数组保存起来
      })
      // rows
      this.rolesList = res.rows
      this.total = res.total
    },
    changpage(page) {
      this.roleParems.page = page
      this.getRoles()
    },
    Sizechange(size) {
      this.roleParems.pagesize = size
      this.getRoles()
    },
    async del(id) {
      await delRoles(id)
      this.$message.success('删除成功')
      this.getRoles()
    },
    async addrole() {
      try {
        await this.$refs.ruleFormRef.validate()
        await addRoles(this.ruleForm)
        this.$message.success('添加成功')
        this.getRoles()
        this.dialogVisible = false
      } catch (e) {
        console.log(e)
      }
    },
    async showRole(id) {
      this.id = id
      const res = await getpermission()
      // console.log(res)
      this.permissionList = transListToTree(res, 0)
      console.log(this.permissionList)
      console.log(id)
      const res2 = await getroleDetail(id)
      console.log(res2)
      this.permIds = res2.permIds

      this.isShow = true
    },
    async assignPermission() {
      console.log(this.$refs.permissiontree.getCheckedKeys())
      const permIds = this.$refs.permissiontree.getCheckedKeys()
      await assignpermission({ id: this.id, permIds })
      this.isShow = false
    },
    btnCancle(row) {
      row.name = row.obj.name
      row.description = row.obj.description
      row.state = row.obj.state
      row.isEdit = false
    },
    async btnConfirm(row) {
      await editRole(row)
      // eslint-disable-next-line require-atomic-updates
      row.isEdit = false
      this.$message.success('修改成功')
    }

  }
}
</script>

